<template>
    <div class="footer" id="Footer">
        <hr/>
        <ul class="footer-ul">
            <li :class="{on : '/recommend' === $route.path}" class="fo-recommendLi" @click="goTo('/recommend')">
                <i class="icon-footer">&#xe63d;</i>
                <div>推荐</div>
            </li>
            <li :class="{on : '/pertailor' === $route.path}" class="good" @click="goTo('/pertailor')">
                <div>
                    <i class="icon-footer">&#xe63a;</i>
                    <div>定制</div>
                </div>
            </li>
            <li :class="{on : '/mine' === $route.path}" @click="goTo('/mine')">
                <div>
                    <i class="icon-footer">&#xe63c;</i>
                    <div>我的</div>
                </div>
            </li>
        </ul>
    </div>
</template>

<script>
    export default {
        created: function () {
            this.$emit('footer', false);
        },
        methods: {
            goTo(path) {
                this.$router.replace(path)
            },
        }
    }
</script>

<style>
    .on {
        color: #EC9B38;
    }

    .icon-footer {
        font-family: iconfont;
        font-style: normal;
        font-size: 50px;
    }

    .footer {
        width: 100%;
        height: 133px;
        position: fixed;
        left: 0;
        bottom: 0;
        background: white;
    }

    .footer-ul {
        height: 96px;
        display: flex;
        justify-content: space-between;
    }

    .footer-ul > li {
        width: 33%;
        height: 96px;
        text-align: center;
    }

    .footer-ul > li > div {
        margin-bottom: 10px;
    }
</style>
